<template>
	<div class="jcxx">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>基础信息</span>
				<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
			</div>
			<div class="text item">
				<el-row :gutter="15">
					<el-form ref="formData" :model="formData" :rules="rules" size="mini" label-width="100px">
						<el-row>
							<el-col :span="10">
								<el-row :gutter="15">
									<el-col :span="24">
										<el-form-item label="仓库编号" prop="warehouseCode">
											<el-input v-model="formData.warehouseCode" placeholder="仓库编号自动获取" clearable
												:style="{width: '100%'}" disabled></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="4">
								<el-row :gutter="15">
									<el-col :span="24">
										<el-form-item label="" prop="isDefault">
											<el-checkbox-group v-model="formData.isDefault" size="medium">
												<el-checkbox v-for="(item, index) in is_defaultOptions" :key="index"
													:label="item.value" :disabled="item.disabled">{{item.label}}
												</el-checkbox>
											</el-checkbox-group>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="10">
								<el-row :gutter="15">
									<el-col :span="24">
										<el-form-item label="仓库名称" prop="warehouseName">
											<el-input v-model="formData.warehouseName" placeholder="请输入" clearable
												:style="{width: '100%'}"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="10">
								<el-row :gutter="15">
									<el-col :span="24">
										<el-form-item label="仓库容量/m³" prop="warehouseVessel">
											<el-input v-model="formData.warehouseVessel" placeholder="请输入" clearable
												:style="{width: '100%'}"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="4">
								<el-row :gutter="15" style="color: white">
									1
								</el-row>
							</el-col>
							<el-col :span="10">
								<el-row :gutter="15">
									<el-col :span="24">
										<el-form-item label="库管部门" prop="dept">
											<el-select v-model="formData.dept" placeholder="请选择下拉选择" clearable
												:style="{width: '100%'}">
												<el-option v-for="(item, index) in deptOptions" :key="index"
													:label="item.label" :value="item.value" :disabled="item.disabled">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="10">
								<el-row :gutter="15">
									<el-col :span="24">
										<el-form-item label="仓库主管" prop="manager">
											<el-select v-model="formData.manager" placeholder="请选择下拉选择" clearable
												@change="updatePhone()" :style="{width: '100%'}">
												<el-option v-for="(item, index) in managerOptions" :key="index"
													:label="item.label" :value="item.value" :disabled="item.disabled">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="4">
								<el-row :gutter="15" style="color: white">
									1
								</el-row>
							</el-col>
							<el-col :span="10">
								<el-row :gutter="15">
									<el-col :span="24">
										<el-form-item label="联系电话" prop="phonenumber">
											<el-input v-model="formData.phonenumber" placeholder="请输入" :disabled='true'
												clearable :style="{width: '100%'}"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="10">
								<el-row :gutter="15">
									<el-col :span="24">
										<el-form-item label="仓库地址" prop="warehouseAddress">
											<el-input v-model="formData.warehouseAddress" placeholder="请输入"
												:disabled='false' clearable :style="{width: '100%'}"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="4">
								<el-row :gutter="15" style="color: white">
									1
								</el-row>
							</el-col>
							<el-col :span="10">
								<el-row :gutter="15">
									<el-col :span="24">
										<div>
											<div>
												<el-select v-model="keywords" filterable remote reserve-keyword
													placeholder="请输入关键词" :remote-method="remoteMethod"
													:loading="loading" :clearable="true" size="mini"
													@change="currentSelect" style="width: 500px">
													<el-option v-for="item in options" :key="item.id" :label="item.name"
														:value="item" class="one-text">
														<span style="float: left">{{ item.name }}</span>
														<span style="float: right; color: #8492a6; font-size: 13px">{{
										          item.district
										        }}</span>
													</el-option>
												</el-select>
											</div>
											<div id="container" class="container"></div>
										</div>
									</el-col>
								</el-row>
							</el-col>
						</el-row>

						<el-col :span="10" style="margin-top: 20px;">
							<el-row :gutter="15">
								<el-col :span="24">
									<el-form-item label="排序" prop="warehouseSort">
										<el-input v-model="formData.warehouseSort" placeholder="请输入" clearable
											:style="{width: '100%'}"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-col>
						<el-col :span="4">
							<el-row :gutter="15" style="color: white;">
								1
							</el-row>
						</el-col>
						<el-col :span="10" style="margin-top: 20px;">
							<el-row :gutter="15">
								<el-col :span="24">
									<el-form-item label="仓库状态" prop="warehouseStatus">
										<el-radio-group v-model="formData.warehouseStatus" size="medium"
											@change="changeStatus">
											<el-radio v-for="(item, index) in warehouse_statusOptions" :key="index"
												:label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
						</el-col>
						<el-col :span="24">
							<el-row :gutter="15">
								<el-col :span="24">
									<el-form-item label="仓库锁定" prop="warehouseLock"
										v-if="formData.warehouseStatus == '0'">
										<el-switch v-model="formData.warehouseLock" active-color="#A4FF7A"
											:active-value="'1'" :inactive-value="'0'"></el-switch>
									</el-form-item>
								</el-col>
							</el-row>
						</el-col>
						<el-col :span="24">
							<el-row :gutter="15">
								<el-col :span="24">
									<el-form-item label="备注" prop="warehouseRemarks">
										<el-input v-model="formData.warehouseRemarks" type="textarea" placeholder="请输入"
											:autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-col>

						<el-footer class="fixed-footer">
							<el-button type="primary" @click="submitElForm">保存</el-button>
							<el-button @click="handleBeforeUnload">关闭</el-button>
							<!-- <el-button>保存并提交</el-button> -->
						</el-footer>
					</el-form>
				</el-row>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>库位信息</span>
			</div>
			<div class="text item">
				<el-row :gutter="15">
					<el-col :span="24" style="margin: 20px 0px;">
						<div>
							<!-- <el-button type="success" v-if="!isEdit" @click="handleAdd()">新增</el-button>
							<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
								@click="handleDelete" v-hasPermi="['warehouse:warehouse:remove']">删除</el-button> -->

							<el-button type="primary" icon="el-icon-plus" size="mini" v-if="!isEdit" @click="handleAdd">
								添加</el-button>
							<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete"
								v-hasPermi="['warehouse:warehouse:remove']">删除</el-button>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="15">
					<el-col :span="24">
						<div>
							<el-table v-loading="loading" :data="locationList"
								@selection-change="handleSelectionChange">
								<el-table-column type="selection" width="50" align="center" />
								<el-table-column label="序号" align="center" key="locationId" prop="locationId"
									v-if="columns[0].visible" />
								<el-table-column label="库位编号" align="center" key="locationCode" prop="locationCode"
									v-if="columns[1].visible" :show-overflow-tooltip="true" />
								<el-table-column label="库位名称" align="center" key="locationName" prop="locationName"
									v-if="columns[2].visible" :show-overflow-tooltip="true" />
								<el-table-column label="库门容量/m³" align="center" key="locationVessel"
									prop="locationVessel" v-if="columns[3].visible" :show-overflow-tooltip="true" />
								<el-table-column label="库位主管" align="center" key="manager" prop="manager"
									v-if="columns[4].visible" width="120" />
								<el-table-column label="排序" align="center" key="locationSort" prop="locationSort"
									v-if="columns[4].visible" width="120" />
								<el-table-column align="center" prop="locationStatus" key="locationStatus" label="库位状态"
									v-if="columns[4].visible" width="120">
									<template #default="{ row }">
										<span v-if="row.locationStatus === '1'">启用</span>
										<span v-else>停用</span>
									</template>
								</el-table-column>
								<el-table-column label="备注" align="center" key="locationRemarks" prop="locationRemarks"
									v-if="columns[4].visible" width="120" />
								<el-table-column label="操作" align="center" width="160"
									class-name="small-padding fixed-width">
									<template slot-scope="scope">
										<el-button size="mini" type="text" icon="el-icon-edit"
											@click="handleUpdate(scope.row)" v-hasPermi="['warehouse:location:edit']">修改
										</el-button>
										<el-button size="mini" type="text" icon="el-icon-delete"
											@click="handleDelete(scope.row)" v-hasPermi="['warehouse:location:remove']">
											删除</el-button>
									</template>
								</el-table-column>
							</el-table>

							<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
								:limit.sync="queryParams.pageSize" @pagination="getList" />
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>

		<!-- 添加或修改库位列表对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="90px">
				<el-form-item label="库位编号" prop="locationCode">
					<el-input disabled v-model="form.locationCode" placeholder="自动获取系统编号" />
				</el-form-item>
				<el-form-item label="库位名称" prop="locationName">
					<el-input v-model="form.locationName" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="库位容量/m³" prop="locationVessel">
					<el-input v-model="form.locationVessel" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="库位主管" prop="manager">
					<el-input v-model="form.manager" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="排序" prop="locationSort">
					<el-input v-model="form.locationSort" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="库位状态" prop="locationStatus">
					<el-radio-group v-model="form.locationStatus" size="medium">
						<el-radio v-for="(item, index) in locationStatusOptions" :key="index" :label="item.value"
							:disabled="item.disabled">{{item.label}}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="仓库备注" prop="locationRemarks">
					<el-input v-model="form.locationRemarks" type="textarea" placeholder="请输入" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>上传附件</span>
			</div>
			<div class="text item">
				<el-upload class="upload-demo" :action="uploadImgUrl" :on-change="uploadChange" :file-list="fileList"
					:before-upload="beforeUpload" :headers="headers" :before-remove="beforeRemove"
					:on-remove="handleRemove">
					<el-button size="small" type="primary">上传</el-button>
					<div slot="tip" class="el-upload__tip">您可以上传doc, pdf, rar等格式的文件，单个文件上传最大200MB。</div>
				</el-upload>
			</div>
		</el-card>

		<div style="margin-top: 50px;">1</div>
	</div>

</template>
<script>
	import {
		getDept,
		getUser,
		listLocation,
		getWarehouseCode,
		getLocation,
		updateLocation,
		addLocation,
		delLocation,
		getWarehouse,
		addWarehouse,
		getLocationCode,
		addLocationWarehouseCode,
		updateWarehouse,
		updateWarehouseCode,
		getAttachment,
		//selectAll,
	} from '../../../../api/warehouse/warehouse.js'

	import {
		getToken
	} from "@/utils/auth";

	import AMapLoader from "@amap/amap-jsapi-loader";
	window._AMapSecurityConfig = {
		// 安全密钥
		securityJsCode: "649689c52644295b06182b02636ac85e",
	};
	export default {
		components: {},
		props: [],
		data() {
			return {
				formData: {
					warehouseCode: undefined,
					isDefault: 0,
					warehouseName: undefined,
					warehouseVessel: undefined,
					dept: undefined,
					manager: undefined,
					phonenumber: undefined,
					warehouseAddress: undefined,
					warehouseSort: undefined,
					warehouseStatus: '0',
					warehouseLock: 0,
					warehouseRemarks: undefined,
					codeId: 'CK20200101',
					number: '0',
					fileList: [],
				},
				rules: {
					warehouseName: [{
						required: true,
						message: '仓库名称不能为空',
						trigger: 'blur'
					}],
					locationName: [{
						required: true,
						message: '库位名称不能为空',
						trigger: 'blur'
					}],
					dept: [{
						required: true,
						message: '请选择库管部门',
						trigger: 'blur'
					}],
					manager: [{
						required: true,
						message: '请选择部门主管',
						trigger: 'blur'
					}],
				},
				is_defaultOptions: [{
					"label": "默认仓库",
					"value": 1
				}],
				deptOptions: [],
				managerOptions: [],
				warehouse_statusOptions: [{
					"label": "启用",
					"value": '0'
				}, {
					"label": "停用",
					"value": '1'
				}],
				deptProps: {
					"multiple": false,
					"label": ""
				},
				managerProps: {
					"multiple": false,
					"label": ""
				},
				// 地图实例
				map: null,
				// 标记点
				marker: "",
				// 地址逆解析
				geoCoder: null,
				// 搜索提示
				AutoComplete: null,
				// 搜索关键字
				keywords: "",
				// 位置信息
				form: {
					lng: "",
					lat: "",
					address: "",
					adcode: "", //地区编码
				},
				// 搜索节流阀
				loading: false,
				// 搜索提示信息
				options: [],
				//选中数据
				ids: [],
				// 库位表格数据
				locationList: null,
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 遮罩层
				loading: true,
				// 列信息
				columns: [{
						key: 0,
						label: `序号`,
						visible: true
					},
					{
						key: 1,
						label: `仓库编号`,
						visible: true
					},
					{
						key: 2,
						label: `仓库名称`,
						visible: true
					},
					{
						key: 3,
						label: `仓库容量/m³`,
						visible: true
					},
					{
						key: 4,
						label: `仓库地址`,
						visible: true
					},
					{
						key: 5,
						label: `库管部门`,
						visible: true
					},
					{
						key: 6,
						label: `仓库主管`,
						visible: true
					},
					{
						key: 7,
						label: `库位数量`,
						visible: true
					},
					{
						key: 8,
						label: `仓库状态`,
						visible: true
					},
					{
						key: 9,
						label: `操作人`,
						visible: true
					},
					{
						key: 10,
						label: `操作时间`,
						visible: true
					},
					{
						key: 11,
						label: `操作`,
						visible: true
					},
				],
				locationStatusOptions: [{
					"label": "启用",
					"value": '1'
				}, {
					"label": "停用",
					"value": '2'
				}],
				// 总条数
				total: 0,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					warehouseCode: null,
				},
				// 表单参数
				form: {},
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				//仓库编号
				warehouseId: '',
				//是否修改
				isEdit: undefined,
				//仓库是否锁定
				isLock: undefined,
				uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload",
				headers: {
					Authorization: "Bearer " + getToken()
				},
				fileList: [], // 已上传的文件列表
				isClick: true,
				//warehouseList: [],
			}
		},
		computed: {
			totalCurrentStock() {
				return '11'
			},
			totalIncomingQuantity() {
				return '11'
			},
			totalInStockQuantity() {
				return '11'
			},
			totalNotStockQuantity() {
				return '11'
			},
			totalNotStockAmount() {
				return '11'
			}
		},
		watch: {},
		created() {
			//获取部门
			this.getDeptOptions();
			//获取仓库主管
			this.getManagerOptions();
			//初始化地图
			this.initMap();

			//获取仓库编号
			this.warehouseId = this.$route.query.warehouseId;
			this.isEdit = this.$route.query.warehouseId;
			//判断是否是修改
			this.isWarehouseEdit();

			// selectAll().then(response => {
			// 	this.warehouseList = response;

			// 	console.log(this.warehouseList);
			// })
		},
		mounted() {
			window.addEventListener('beforeunload', this.handleBeforeUnload);
		},
		methods: {
			//是否修改仓库
			isWarehouseEdit() {
				if (this.isEdit) {
					getWarehouse(this.warehouseId).then(response => {
						this.formData = response.data;
						this.isLock = response.data.warehouseLock;
						this.updatePhone();
						this.queryParams.warehouseCode = this.formData.warehouseCode
						if (this.queryParams.warehouseCode != null) {
							//查询库位
							this.getList();

							//查询文件
							getAttachment(this.formData.warehouseCode).then(response => {
								const attachment = response;

								this.fileList = [...attachment.flat().map(file => ({
									name: file.fileName,
									url: file.filePath,
									size: file.size
								})), ...this.fileList];
							});
						}
					});
				} else {
					//查询仓库编号
					getWarehouseCode(13).then(response => {
						this.formData.warehouseCode = response.sequence;
						this.formData.number = response.number;
						this.formData.codeId = response.codeId;
					});
					//查询库位
					this.getList();
				}
			},
			//删除文件之后
			handleRemove(file, fileList) {
				this.fileList = fileList;
			},
			//删除文件之前
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			//上传文件
			uploadChange(file, fileList) {
				this.fileList = fileList;
			},
			beforeUpload(file) {
				// 定义允许的文件类型
				const allowedTypes = ['application/msword', 'application/pdf', 'application/x-rar-compressed',
					'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
				];
				// 检查文件类型是否在允许的类型中
				const isAllowedType = allowedTypes.includes(file.type);
				// 检查文件大小是否不超过200MB (200 * 1024 * 1024 bytes)
				const isLt200M = file.size <= 200 * 1024 * 1024;

				if (!isAllowedType) {
					this.$message.error('上传文件只能是 doc, pdf, rar 格式!');
				}
				if (!isLt200M) {
					this.$message.error('上传文件大小不能超过 200MB!');
				}
				return isAllowedType && isLt200M;
			},
			//刷新电话号码
			updatePhone() {
				this.managerOptions.forEach((item, index) => {
					if (item.value === this.formData.manager) {
						this.formData.phonenumber = item.phonenumber;
					}
				})
			},
			//仓库状态改变
			changeStatus() {
				if (this.formData.warehouseStatus == '1') {
					this.formData.warehouseLock = 0;
				}
			},
			// 表单重置
			reset() {
				this.form = {
					locationId: null,
					locationCode: null,
					locationName: null,
					locationVessel: null,
					warehouseCode: null,
					manager: null,
					warehouseAddress: null,
					locationSort: null,
					locationStatus: '1',
					locationRemarks: null,
					isDelete: null,
					crateBy: null,
					crateTime: null,
					updateBy: null,
					updateTime: null,
					isDefault: null,
					codeId: null,
					number: null,
				};
				//this.resetForm("form");
			},
			// 取消按钮
			cancel() {
				this.open = false;
				//this.reset();
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				//查询库位编号
				getLocationCode(14).then(response => {
					this.form.locationCode = response.sequence;
					this.form.number = response.number;
					this.form.codeId = response.codeId;
				});
				this.open = true;
				this.title = "添加库位列表";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const locationId = row.locationId || this.ids
				getLocation(locationId).then(response => {
					console.log(response);
					this.form = response.data;
					this.open = true;
					this.title = "修改库位列表";
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const locationIds = row.locationId || this.ids;
				this.$modal.confirm('是否确认删除库位列表编号为"' + locationIds + '"的数据项？').then(function() {
					return delLocation(locationIds);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 提交库位按钮 */
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {



						if (this.form.locationId != null) {
							updateLocation(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addLocation(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			//获取库位列表
			getList() {
				this.loading = true;
				listLocation(this.queryParams).then(response => {
					this.locationList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},

			//多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.locationId);
				this.single = selection.length != 1;
				this.multiple = !selection.length;
			},
			submitElForm() {
				this.$refs['formData'].validate(valid => {
					if (!valid) return

					if (!this.isClick) {
						this.$message.warning('请勿重复提交');
						return;
					}
					this.isClick = false;
					// TODO 提交表单
					//是否是修改
					this.formData.fileList = this.fileList;

					if (this.isEdit) {
						//是否为 未锁定
						if (this.isLock == 0) {
							console.log('未锁定')
							updateWarehouse(this.formData).then(response => {
								//添加仓库库位
								const datas = [{
									'locationIds': [],
									'warehouseCode': '',
								}]
								datas.locationIds = this.ids;
								datas.warehouseCode = this.formData.warehouseCode;
								if (this.locationList != null) {
									updateWarehouseCode(this.formData.warehouseCode);
									if (this.ids.length != 0) {
										addLocationWarehouseCode(datas);
									}
								}
								this.$modal.msgSuccess("修改成功");
								this.$router.go(-1);
							}).catch(error => {
								this.isClick = true;
							});

							return;
						} else {
							this.$message({
								message: '仓库已锁定！',
								type: 'warning'
							});

							return;
						}
					} else {
						if (this.formData.isDefault == false)
							this.formData.isDefault = 0;
						else
							this.formData.isDefault = 1;
						//新增
						addWarehouse(this.formData).then(response => {
							//添加仓库库位
							const datas = [{
								'locationIds': [],
								'warehouseCode': '',
							}]
							datas.locationIds = this.ids;
							datas.warehouseCode = this.formData.warehouseCode;

							if (this.ids.length != 0) {
								addLocationWarehouseCode(datas);
							}

							this.$modal.msgSuccess("保存成功");
							this.$router.push({
								path: '/wms/warehouse/warehouse/index'
							});
						}).catch(error => {
							this.isClick = true;
						});

					}
				})
			},
			resetForm() {
				this.$refs['formData'].resetFields()
			},
			getDeptOptions() {
				// TODO 发起请求获取数据
				getDept().then((result) => {
					result.forEach(r => {
						this.deptOptions.push({
							"label": r.deptName,
							"value": r.deptName
						})
					})
				})
			},
			getManagerOptions() {
				// TODO 发起请求获取数据
				getUser().then((result) => {
					result.forEach(r => {
						this.managerOptions.push({
							"label": r.userName,
							"value": r.userName,
							"phonenumber": r.phonenumber
						})
					})
				})

			},
			//地图
			initMap() {
				AMapLoader.load({
						// 你申请的Key
						key: "4950c622573e0253a489840374cf8dd3",
						version: "2.0",
						// 需要用到的插件
						plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
					})
					.then((AMap) => {
						this.map = new AMap.Map("container", {
							viewMode: "3D", //是否为3D地图模式
							zoom: 5, //初始化地图级别
							center: [105.602725, 37.076636], //初始化地图中心点位置
						});
						//地址逆解析插件
						this.geoCoder = new AMap.Geocoder({
							city: "010", //城市设为北京，默认：“全国”
							radius: 1000, //范围，默认：500
						});
						// 搜索提示插件
						this.AutoComplete = new AMap.AutoComplete({
							city: "全国"
						});
						//点击获取经纬度;
						this.map.on("click", (e) => {
							// 获取经纬度
							this.form.lng = e.lnglat.lng;
							this.form.lat = e.lnglat.lat;

							console.log(this.form.lng + '/' + this.form.lat)
							// 清除点
							this.removeMarker();
							// 标记点
							this.setMapMarker();
						});
					})
					.catch((err) => {
						// 错误
						console.log(err);
					});
			},
			// 标记点
			setMapMarker() {
				// 自动适应显示想显示的范围区域
				this.map.setFitView();
				this.marker = new AMap.Marker({
					map: this.map,
					position: [this.form.lng, this.form.lat],
				});
				// 逆解析地址
				this.toGeoCoder();
				this.map.setFitView();
				this.map.add(this.marker);
			},
			// 清除点
			removeMarker() {
				if (this.marker) {
					this.map.remove(this.marker);
				}
			},
			// 逆解析地址
			toGeoCoder() {
				let lnglat = [this.form.lng, this.form.lat];
				this.geoCoder.getAddress(lnglat, (status, result) => {
					if (status === "complete" && result.regeocode) {
						this.form.address = result.regeocode.formattedAddress;
						this.formData.warehouseAddress = this.form.address;
					}
				});
			},
			// 搜索
			remoteMethod(query) {
				console.log(query);
				if (query !== "") {
					this.loading = true;
					setTimeout(() => {
						this.loading = false;
						this.AutoComplete.search(query, (status, result) => {
							this.options = result.tips;
						});
					}, 200);
				} else {
					this.options = [];
				}
			},
			// 选中提示
			currentSelect(val) {
				// 清空时不执行后面代码
				if (!val) {
					return;
				}
				this.form = {
					lng: val.location.lng,
					lat: val.location.lat,
					address: val.district + val.address,
					adcode: val.adcode,
				};

				// 清除点
				this.removeMarker();
				// 标记点
				this.setMapMarker();
			},
			//关闭页面
			handleBeforeUnload(event) {
				const message = '你确定要离开此页面吗？';
				event.returnValue = message; // 兼容性设置
				return message;
			}

		},
		beforeDestroy() {
			window.removeEventListener('beforeunload', this.handleBeforeUnload);
		}
	}
</script>
<style>
	.fixed-footer {
		position: fixed;
		bottom: 0;
		left: 100px;

		right: 0;
		padding-left: 1400px;
		padding-top: 20px;
		background-color: #f4f4f4;
		/* 设置底部背景色 */
		z-index: 1000;
		/* 确保底部不被遮挡 */
	}

	.jcxx {
		margin-top: 20px;

	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 100%;
		margin-top: 20px;
	}

	.total-row {
		background-color: #f9f9f9;
		/* 背景色 */
		font-weight: bold;
		/* 粗体 */
	}

	.label {
		color: black;
		/* 标签字体颜色 */
		margin-left: 10px;
	}

	.you {
		margin-left: 930px;
	}

	.value {
		color: rgb(227, 139, 50);
		/* 数字字体颜色 */
	}

	/* 如果需要调整对齐方式，可以添加其他样式 */
	.total-row td {
		text-align: left;
		/* 左对齐 */
	}

	.total-row td:last-child {
		text-align: right;
		/* 最后一列右对齐 */
	}

	.container {
		width: 500px;
		height: 300px;
	}
</style>
